<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">		
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<meta name="keywords" content="关键字">
		<meta name="description" content="网站描述">
		<meta name="author" content="edit by Binggen">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>云耕创意网站首页</title>
		<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
		<link rel="shortcut icon" href="favicon.ico">
	</head>

	<body>
		<div class="menu-box">
			<div class="menu clearfix">	
				<div class="logo"><a href="">logo</a></div>
				<ul id="nav" class="clearfix">
					<li data-menuanchor="page1" class="active"><a href="#page1">首页</a></li>
					<li data-menuanchor="page2"><a href="#page2">业务范围</a></li>
					<li data-menuanchor="page3"><a href="#page3">客户案例</a></li>
					<li data-menuanchor="page4"><a href="#page4">服务流程</a></li>
					<li data-menuanchor="page5"><a href="#page5">关于我们</a></li>
					<li data-menuanchor="page6"><a href="#page6">联系我们</a></li>
				</ul>
			</div>	
		</div>
		<div id="wrap">
			<!--第一屏-->
		    <div class="section section1">
		    	<!--<div class="bg">
		    		<img src="images/bg1.png"/>
		    	</div>-->
		    	<div class="content-area">
		    		<h3 class="p1-1">致力于为您提供最专业的<span>互联网服务</span></h3>
		    		<p class="p1-2">Dedicated to providing you with the most professional Internet service</p>
		    	</div>
		        
		    </div>
		    <!--第二屏-->
		    <div class="section">
		    	<div class="bg">
		    		<img src="images/bg2.png"/>
		    	</div>
		    	<div class="content">
			    	<div class="wrapper title scale">
			    		<h1>我们能做什么</h1>
			    		<p class="etitle">· what can we do ·</p>
			    	</div>
			        <ul class="p2 clearfix">
			        	<li class="tr_left">
			        		<div class="icon"></div>
			        		<h3>微信开发</h3>
			        		<p>针对腾讯微信公共帐号开发，帮助企业实现自媒体营销，打开另一片天空。</p>
			        	</li>
			        	<li class="tr_left">
			        		<div class="icon"></div>
			        		<h3>网站系统开发</h3>
			        		<p>网站形象代表着企业的形象，也是用户了解一个企业的入口，必须要专业。</p>
			        	</li>
			        	<li class="tr_right">
			        		<div class="icon"></div>
			        		<h3>手机应用开发</h3>
			        		<p>逻辑思维帮助企业开发手机应用更有针对性在移动互联网抢占先机夺取市场</p>
			        	</li>
			        	<li class="tr_right">
			        		<div class="icon"></div>
			        		<h3>管理软件定制</h3>
			        		<p>网站形象代表着企业的形象，也是用户了解一个企业的入口，必须要专业。</p>
			        	</li>
			        </ul>
		    	</div>
		    </div>
		    <!--第三屏-->
		    <div class="section section3">
		    	<!--<div class="bg">
		    		<img src="images/bg3.png"/>
		    	</div>-->
		    	<div class="content">
			    	<div class="wrapper title scale">
				    	<h1>客户案例</h1>
				    	<p class="etitle">· SUCCESS STORIES ·</p>
				    </div>
					<ul class="tab-tit">
						<li class="select">微信开发</li>
						<li>网站系统开发</li>
						<li>手机应用开发</li>
						<li>管理软件定制</li>
					</ul>
					<div class="tab-con wrapper">
						<!--微信开发-->
						<ul class="tabs-info clearfix">
							<li>
								<a href="pro-info.html">
									<div class="thumbnail">
										<img src="images/p3-1.png"/>
									</div>
									<div class="tab-info-text">
										<div class="pro-name clearfix"><p class="label left">名称：</p><p class="lines left">XXXX微信开发案例</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">类型：</p><p class="lines left">微型公众号平台</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">功能：</p><p class="lines left">企业产品展示，企业品牌宣传</p></div>
									</div>
								</a>
							</li>
							<li>
								<a href="pro-info.html">
									<div class="thumbnail">
										<img src="images/p3-2.png"/>
									</div>
									<div class="tab-info-text">
										<div class="pro-name clearfix"><p class="label left">名称：</p><p class="lines left">XXXX微信开发案例</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">类型：</p><p class="lines left">微型公众号平台</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">功能：</p><p class="lines left">企业产品展示，企业品牌宣传</p></div>
									</div>
								</a>
							</li>
							<li>
								<a href="pro-info.html">
									<div class="thumbnail">
										<img src="images/p3-3.png"/>
									</div>
									<div class="tab-info-text">
										<div class="pro-name clearfix"><p class="label left">名称：</p><p class="lines left">XXXX微信开发案例</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">类型：</p><p class="lines left">微型公众号平台</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">功能：</p><p class="lines left">企业产品展示，企业品牌宣传</p></div>
									</div>
								</a>
							</li>
							<li>
								<a href="pro-info.html">
									<div class="thumbnail">
										<img src="images/p3-4.png"/>
									</div>
									<div class="tab-info-text">
										<div class="pro-name clearfix"><p class="label left">名称：</p><p class="lines left">XXXX微信开发案例</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">类型：</p><p class="lines left">微型公众号平台</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">功能：</p><p class="lines left">企业产品展示，企业品牌宣传</p></div>
									</div>
								</a>
							</li>
						</ul>
						<!--网站系统开发-->
						<ul class="tabs-info clearfix">
							<li>
								<a href="pro-info.html">
									<div class="thumbnail">
										<img src="images/p3-1.png"/>
									</div>
									<div class="tab-info-text">
										<div class="pro-name clearfix"><p class="label left">名称：</p><p class="lines left">XXXX网站系统开发</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">类型：</p><p class="lines left">微型公众号平台</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">功能：</p><p class="lines left">企业产品展示，企业品牌宣传</p></div>
									</div>
								</a>
							</li>
							<li>
								<a href="pro-info.html">
									<div class="thumbnail">
										<img src="images/p3-2.png"/>
									</div>
									<div class="tab-info-text">
										<div class="pro-name clearfix"><p class="label left">名称：</p><p class="lines left">XXXX网站系统开发</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">类型：</p><p class="lines left">微型公众号平台</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">功能：</p><p class="lines left">企业产品展示，企业品牌宣传</p></div>
									</div>
								</a>
							</li>
							<li>
								<a href="pro-info.html">
									<div class="thumbnail">
										<img src="images/p3-3.png"/>
									</div>
									<div class="tab-info-text">
										<div class="pro-name clearfix"><p class="label left">名称：</p><p class="lines left">XXXX网站系统开发</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">类型：</p><p class="lines left">微型公众号平台</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">功能：</p><p class="lines left">企业产品展示，企业品牌宣传</p></div>
									</div>
								</a>
							</li>
							<li>
								<a href="pro-info.html">
									<div class="thumbnail">
										<img src="images/p3-4.png"/>
									</div>
									<div class="tab-info-text">
										<div class="pro-name clearfix"><p class="label left">名称：</p><p class="lines left">XXXX网站系统开发</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">类型：</p><p class="lines left">微型公众号平台</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">功能：</p><p class="lines left">企业产品展示，企业品牌宣传</p></div>
									</div>
								</a>
							</li>
						</ul>
						<!--手机应用开发-->
						<ul class="tabs-info clearfix">
							<li>
								<a href="pro-info.html">
									<div class="thumbnail">
										<img src="images/p3-1.png"/>
									</div>
									<div class="tab-info-text">
										<div class="pro-name clearfix"><p class="label left">名称：</p><p class="lines left">XXXX手机应用开发</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">类型：</p><p class="lines left">微型公众号平台</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">功能：</p><p class="lines left">企业产品展示，企业品牌宣传</p></div>
									</div>
								</a>
							</li>
							<li>
								<a href="pro-info.html">
									<div class="thumbnail">
										<img src="images/p3-2.png"/>
									</div>
									<div class="tab-info-text">
										<div class="pro-name clearfix"><p class="label left">名称：</p><p class="lines left">XXXX手机应用开发</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">类型：</p><p class="lines left">微型公众号平台</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">功能：</p><p class="lines left">企业产品展示，企业品牌宣传</p></div>
									</div>
								</a>
							</li>
							<li>
								<a href="pro-info.html">
									<div class="thumbnail">
										<img src="images/p3-3.png"/>
									</div>
									<div class="tab-info-text">
										<div class="pro-name clearfix"><p class="label left">名称：</p><p class="lines left">XXXX手机应用开发</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">类型：</p><p class="lines left">微型公众号平台</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">功能：</p><p class="lines left">企业产品展示，企业品牌宣传</p></div>
									</div>
								</a>
							</li>
							<li>
								<a href="pro-info.html">
									<div class="thumbnail">
										<img src="images/p3-4.png"/>
									</div>
									<div class="tab-info-text">
										<div class="pro-name clearfix"><p class="label left">名称：</p><p class="lines left">XXXX手机应用开发</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">类型：</p><p class="lines left">微型公众号平台</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">功能：</p><p class="lines left">企业产品展示，企业品牌宣传</p></div>
									</div>
								</a>
							</li>
						</ul>
						<!--管理软件定制-->
						<ul class="tabs-info clearfix">
							<li>
								<a href="pro-info.html">
									<div class="thumbnail">
										<img src="images/p3-1.png"/>
									</div>
									<div class="tab-info-text">
										<div class="pro-name clearfix"><p class="label left">名称：</p><p class="lines left">XXXX管理软件定制</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">类型：</p><p class="lines left">微型公众号平台</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">功能：</p><p class="lines left">企业产品展示，企业品牌宣传</p></div>
									</div>
								</a>
							</li>
							<li>
								<a href="pro-info.html">
									<div class="thumbnail">
										<img src="images/p3-2.png"/>
									</div>
									<div class="tab-info-text">
										<div class="pro-name clearfix"><p class="label left">名称：</p><p class="lines left">XXXX管理软件定制</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">类型：</p><p class="lines left">微型公众号平台</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">功能：</p><p class="lines left">企业产品展示，企业品牌宣传</p></div>
									</div>
								</a>
							</li>
							<li>
								<a href="pro-info.html">
									<div class="thumbnail">
										<img src="images/p3-3.png"/>
									</div>
									<div class="tab-info-text">
										<div class="pro-name clearfix"><p class="label left">名称：</p><p class="lines left">XXXX管理软件定制</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">类型：</p><p class="lines left">微型公众号平台</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">功能：</p><p class="lines left">企业产品展示，企业品牌宣传</p></div>
									</div>
								</a>
							</li>
							<li>
								<a href="pro-info.html">
									<div class="thumbnail">
										<img src="images/p3-4.png"/>
									</div>
									<div class="tab-info-text">
										<div class="pro-name clearfix"><p class="label left">名称：</p><p class="lines left">XXXX管理软件定制</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">类型：</p><p class="lines left">微型公众号平台</p></div>
										<div class="pro-name pro-name-spec clearfix"><p class="label left">功能：</p><p class="lines left">企业产品展示，企业品牌宣传</p></div>
									</div>
								</a>
							</li>
						</ul>

					</div>
		    	</div>
		    </div>
		    <!--第四屏-->
		    <div class="section">
		    	<div class="bg">
		    		<img src="images/bg4.png"/>
		    	</div>
		        <div class="wrapper title scale">
				  	<h1>服务流程</h1>
				   	<p class="etitle">· service process ·</p>
				</div>
				<div class="wrapper content">
					<ul class="process-lines clearfix">
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
					<ul class="process-txt clearfix">
						<li>
							<em class="order-num"></em>
							<h3 class="process-tit">需求沟通</h3>
							<p>倾听客户需求，了解用户使用环境和操作流程</p>
						</li>
						<li>
							<em class="order-num"></em>
							<h3 class="process-tit">交互设计</h3>
							<p>头脑风景交互情景模拟，原型设计</p>
						</li>
						<li>
							<em class="order-num"></em>
							<h3 class="process-tit">视觉创意</h3>
							<p>色彩及平面元素设定，结构和布局规范确认</p>
						</li>
						<li>
							<em class="order-num"></em>
							<h3 class="process-tit">技术开发</h3>
							<p>移动应用数据对接与开发</p>
						</li>
						<li>
							<em class="order-num"></em>
							<h3 class="process-tit">测试反馈</h3>
							<p>修改调整，规范完善</p>
						</li>
						<li>
							<em class="order-num"></em>
							<h3 class="process-tit">跟进服务</h3>
							<p>后续维护，持续跟进</p>
						</li>
					</ul>				
				</div>
		    </div>
		    <!--第五屏-->
		    <div class="section section5">
		       	<div class="wrapper title scale">
				  	<h1>关于我们</h1>
				   	<p class="etitle">· about us ·</p>
				</div>
				<div class="wrapper about-box">
					<div class="thumbnail">
						<img src="images/p5-1.png"/>
					</div>
					<p>某科技公司是一个诞生于2013年机器人浪潮来袭前际，总部位于“硬件之都”中国深圳。</p>
					<p>我们是一群热衷于智能机器人的极客、设计师和发烧友，对未来充满无限创想、野心和激情。“在最好的时光里，撒野去”是我们所倡导的品牌文化，号召
属于这个时代的年轻人，不羁束缚、随心逐梦！</p>
					<p>我们是一群热衷于智能机器人的极客、设计师和发烧友，对未来充满无限创想、野心和激情。“在最好的时光里，撒野去”是我们所倡导的品牌文化，号召
属于这个时代的年轻人，不羁束缚、随心逐梦！</p>
				</div>
		    </div>
		    <!--第六屏-->
		    <div class="section">
		    	<div class="bg">
		    		<img src="images/bg6.png"/>
		    	</div>
		    	<div class="wrapper title title-spec scale">
				  	<h1>联系我们</h1>
				   	<p class="etitle">· contact us ·</p>
				</div>
				<div class="wrapper contact-box content clearfix">
					<div class="contact-left left">
						<div class="thumbnail qr-code">
							<img src="images/qr-code.png"/>
						</div>
						<div class="con-email">
							<p>电子邮箱</p>
							<p><a href="mailto:">contact@fkadjkhsf.com</a></p>
						</div>
						<div class="con-tell">
							<p>联系电话</p>
							<p>020-000000 400-000000</p>
						</div>
						<div class="con-addr">
							<p>联系地址</p>
							<p>XXX省XXX市XXX县XXX路XXX号</p>
						</div>
					</div>
					<div class="contact-right right">
						<form class="customer-info" action="" method="post">
							<div class="form-box">
								<label class="label" for="username">姓名</label>
								<input id="username" class="username" name="" placeholder="请输入您的姓名" />
							</div>
							<div class="form-box">
								<label class="label" for="phonenum">电话</label>
								<input id="phonenum" class="phonenum" name="" placeholder="请输入您的电话/手机号码" />
							</div>
							<div class="form-box">
								<label class="label" for="txt-info">内容</label>
								<textarea name="" id="txt-info" rows="4" placeholder="请输入您的需求"></textarea>
							</div>
							<div class="form-box">
								<input type="button" name="" id="submit" value="提交" />
							</div>
						</form>
					</div>
				</div>
		    </div>
		   
		    <div class="section fp-auto-height">
		        <div class="footer">
		          	<p>Copyright &copy; <span class="cur-year"></span>xxxxxxx.com All Rights Reserved　版权所有·云耕创意</p>
		          	<p>备案号：<a href="">浙ICP备00000000号-1 </a></p>
		        </div>
		    </div>

		</div>
		<script type="text/javascript" src="js/jquery.easing.min.js" ></script>
		<script type="text/javascript" src="js/jquery.fullPage.min.js" ></script>
		<script type="text/javascript" src="layer/layer.js" ></script>
		<script type="text/javascript" src="js/common.js" ></script>
		<script>
			$(function(){
				var tooltips=[];
				var oA=$("#nav li");
				for(var i=0,length=oA.length;i<length;i++){
					tooltips.push(oA.eq(i).find("a").text());
				};
			    $('#wrap').fullpage({
			    	anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6',"footer"],
					menu: '#nav',
					css3:false,
					resize:true,
					navigation:true,
					navigationColor:'#000',
					navigationTooltips:tooltips,
					easing:'easeInOutCubic',
					animateAnchor:false,
					afterLoad:function(anchorLink,index){
						switch(anchorLink){
							case "page3":
								var oParent=$(".tabs-info");
								oParent.each(function(){
									$(this).find("li").eq(0).addClass("fadeInUp");
									$(this).find("li").eq(1).addClass("fadeInDown");
									$(this).find("li").eq(2).addClass("fadeInUp");
									$(this).find("li").eq(3).addClass("fadeInDown");
								});
								break;
							case "page5":
								var aboutbox=$(".about-box");
								aboutbox.removeClass("zoomOut").addClass("zoomInUp");
								break;
							case "page6":
								var conLeft=$(".contact-left"),
									conRight=$(".contact-right");
								conLeft.addClass("fadeInLeft").removeClass("fadeOutLeft");
								conRight.addClass("fadeInRight").removeClass("fadeOutRight");
								break;
						}
					},
					onLeave:function(index, nextIndex, direction){
						switch(index){
							case 3:
								var oParent=$(".tabs-info"),
									timer=null;
									
								clearTimeout(timer);
								timer=setTimeout(function(){
									oParent.each(function(){
										$(this).find("li").eq(0).removeClass("fadeInUp");
										$(this).find("li").eq(1).removeClass("fadeInDown");
										$(this).find("li").eq(2).removeClass("fadeInUp");
										$(this).find("li").eq(3).removeClass("fadeInDown");
									}
								)},300)
								break;
							case 5:
								var aboutbox=$(".about-box");
								aboutbox.removeClass("zoomInUp").addClass("zoomOut");
								break;
							case 6:
								var conLeft=$(".contact-left"),
									conRight=$(".contact-right");
								if(!(nextIndex==7)){
									conLeft.removeClass("fadeInLeft").addClass("fadeOutLeft");
									conRight.removeClass("fadeInRight").addClass("fadeOutRight");
								}
								console.log(nextIndex);
								break
						}
					}
			    });
			    $(window).resize(function(){
			        autoScrolling();
			    });	
			    function autoScrolling(){
			        var $wWid = $(window).width();
			        if($wWid < 1024){
			            $.fn.fullpage.setAutoScrolling(false);
			        } else {
			            $.fn.fullpage.setAutoScrolling(true);
			        }
			    }
			    autoScrolling();

			    
			    //选项卡
			  	mUtil.tabs(".tab-tit","select",".tab-con");
			  	$(".process-txt li:nth-child(2n-1)").addClass("commomTop1");
			  	$(".process-txt li:nth-child(2n)").addClass("commomTop2");
			  	
			  	//流程图处理
			  	var oLi=$(".process-txt li");
			  	var liWidth=oLi.width();
			  	oLi.each(function(){
			  		var i=$(this).index();
			  		var child1=$(this).find("h3"),
			  			child2=$(this).find("em");
			  			child2.text(i+1);
			  		
			  		var mleft=149+liWidth*i;
			  		$(this).css({"left":mleft,"transition-delay":(i+1)*0.4+"s"});
			  		if(i%2=="0"){
			  			$(this).append(child1);
			  			$(this).append(child2);
			  		}			  		
			  	});
			  	
			  	
			});
		</script>
	</body>

</html>